<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>仓库管理</title>
</head>
<body>

<div class="container mt-5">

    <table class="table">
        <thead>
        <tr>
            <th>仓库编号</th>
            <th>名称</th>
            <th>位置</th>
            <th>存储空间</th>
        </tr>
        </thead>
        <tbody id="warehouseTableBody">
        <!-- Table content will be dynamically populated here -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加仓库模态框 -->
<div class="modal fade" id="addWarehouseModal" tabindex="-1" role="dialog" aria-labelledby="addWarehouseModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addWarehouseModalLabel">添加仓库</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加仓库表单 -->
                <form id="addWarehouseForm">
                    <div class="form-group">
                        <label for="warehouseName">名称</label>
                        <input type="text" class="form-control" id="warehouseName" name="warehouseName">
                    </div>
                    <div class="form-group">
                        <label for="warehouseLocation">位置</label>
                        <input type="text" class="form-control" id="warehouseLocation" name="warehouseLocation">
                    </div>
                    <div class="form-group">
                        <label for="storageSpace">存储空间</label>
                        <input type="text" class="form-control" id="storageSpace" name="storageSpace">
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑仓库模态框 -->
<div class="modal fade" id="editWarehouseModal" tabindex="-1" role="dialog" aria-labelledby="editWarehouseModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editWarehouseModalLabel">编辑仓库</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑仓库表单 -->
                <form id="editWarehouseForm">
                    <input type="hidden" id="editWarehouseId" name="warehouseNumber">
                    <div class="form-group">
                        <label for="editWarehouseName">名称</label>
                        <input type="text" class="form-control" id="editWarehouseName" name="warehouseName">
                    </div>
                    <div class="form-group">
                        <label for="editWarehouseLocation">位置</label>
                        <input type="text" class="form-control" id="editWarehouseLocation" name="warehouseLocation">
                    </div>
                    <div class="form-group">
                        <label for="editStorageSpace">存储空间</label>
                        <input type="text" class="form-control" id="editStorageSpace" name="storageSpace">
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 自定义JS -->
<script>
    // 加载仓库数据的函数
    function loadWarehouseData(start, pageSize) {
        $.ajax({
            url: "${pageContext.request.contextPath}/warehouse?operation=getWarehousesByPage&start=" + start + "&pageSize=" + pageSize,
            type: "GET",
            dataType: "json",
            success: function (data) {
                // 清空表格内容
                $("#warehouseTableBody").empty();
                // 填充表格数据
                $.each(data.data, function (index, warehouse) {
                    // 为每行添加data-id属性
                    $("#warehouseTableBody").append(
                        "<tr data-id='" + warehouse.warehouseNumber + "'>" +
                        "<td>" + warehouse.warehouseNumber + "</td>" +
                        "<td>" + warehouse.warehouseName + "</td>" +
                        "<td>" + warehouse.warehouseLocation + "</td>" +
                        "<td>" + warehouse.storageSpace + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }

    // 提交添加仓库表单的函数
    $("#addWarehouseForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/warehouse?operation=addWarehouse",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 添加成功后重新加载数据
                loadWarehouseData(1, 5); // 添加后重新加载第一页数据
                // 重置表单并关闭模态框
                $("#addWarehouseForm")[0].reset();
                $("#addWarehouseModal").modal("hide");
                // 显示成功信息
                alert("仓库添加成功！");
            },
            error: function () {
                alert("添加仓库时出错！");
            }
        });
    });

    // 填充编辑仓库模态框数据的函数
    function populateEditModal(warehouseNumber) {
        var warehouseRow = $("table tbody").find("tr[data-id='" + warehouseNumber + "']");
        var warehouseName = warehouseRow.find("td:eq(1)").text();
        var warehouseLocation = warehouseRow.find("td:eq(2)").text();
        var storageSpace = warehouseRow.find("td:eq(3)").text();

        // 填充表单字段
        $("#editWarehouseId").val(warehouseNumber);
        $("#editWarehouseName").val(warehouseName);
        $("#editWarehouseLocation").val(warehouseLocation);
        $("#editStorageSpace").val(storageSpace);
    }

    // 提交编辑仓库表单的函数
    $("#editWarehouseForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/warehouse?operation=updateWarehouse",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                // 更新成功后重新加载数据
                loadWarehouseData(1, 5); // 更新后重新加载第一页数据
                // 关闭模态框
                $("#editWarehouseModal").modal("hide");
                // 显示成功信息
                alert("仓库更新成功！");
            },
            error: function () {
                alert("更新仓库时出错！");
            }
        });
    });

    // 处理编辑按钮点击的函数
    function editWarehouse(warehouseNumber) {
        populateEditModal(warehouseNumber);
        $("#editWarehouseModal").modal("show");
    }

    // 删除仓库的函数
    function deleteWarehouse(warehouseNumber) {
        if (confirm("确定要删除这个仓库吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/warehouse?operation=deleteWarehouse",
                type: "POST",
                data: { warehouseNumber: warehouseNumber },
                dataType: "json",
                success: function (data) {
                    // 删除成功后重新加载数据
                    loadWarehouseData(1, 5); // 删除后重新加载第一页数据
                    // 显示成功信息
                    alert("仓库删除成功！");
                },
                error: function () {
                    alert("删除仓库时出错！");
                }
            });
        }
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#prevPageBtn").data("currentPage"));
        if (currentPage > 1) {
            // 加载上一页数据
            loadWarehouseData(currentPage - 1, 5); // 假设每页5条数据
            $("#prevPageBtn").data("currentPage", currentPage - 1); // 更新当前页码
            $("#nextPageBtn").data("currentPage", currentPage - 1); // 更新下一页按钮的当前页码
        }
    });

    $("#nextPageBtn").click(function () {
        // 获取当前页码
        var currentPage = parseInt($("#nextPageBtn").data("currentPage"));
        // 加载下一页数据
        loadWarehouseData(currentPage + 1, 5); // 假设每页5条数据
        $("#prevPageBtn").data("currentPage", currentPage + 1); // 更新上一页按钮的当前页码
        $("#nextPageBtn").data("currentPage", currentPage + 1); // 更新当前页码
    });

    $(document).ready(function () {
        // 页面加载时加载第一页仓库数据
        loadWarehouseData(1, 5); // 假设每页5条数据
        // 设置分页按钮的初始页码
        $("#prevPageBtn").data("currentPage", 1);
        $("#nextPageBtn").data("currentPage", 1);
    });

    // 手动移除模态框隐藏时的背景遮罩，防止黑色阴影
    $('#addWarehouseModal, #editWarehouseModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });
</script>

</body>
</html>
